<!--
 * @Author: your name
 * @Date: 2021-01-11 20:23:09
 * @LastEditTime: 2021-01-13 12:27:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\components\goodsItem\index.vue
-->
<template>
  <navigator class="goods_item" :url="`/pages/goods_detail/main?goods_id=${item.goods_id}`">
    <image
      class="goods_image"
      mode="aspectFit"
      lazy-load="true"
      :src="item.goods_small_logo || '/static/empty.png'"
    ></image>
    <view class="goods_info">
      <view class="goods_name">{{ item.goods_name }}</view>
      <view class="goods_price">{{ item.goods_price }}</view>
      <slot></slot>
    </view>
  </navigator>
</template>

<script>
export default {
    props:['item']
};
</script>

<style lang="less" scoped>
 .goods_item {
  display: flex;
  padding: 20rpx;
}
 .goods_item .goods_image {
  width: 191rpx;
  height: 191rpx;
  margin-right: 20rpx;
  object-fit: cover;
}
 .goods_item .goods_info {
   position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 24rpx;
  padding: 20rpx 0;
  color: #434343;
  .goods_name {
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
  }
}
 .goods_item .goods_info .goods_price {
  color: #ea4350;
  &::before {
    content: "￥";
    font-size: 80%;
  }
}
</style>